<template>
  <div v-loading="loading" class="sp-form-main">
    <div v-if="mode != 'add'" class="instructions">
      <h3>说明</h3>
      <p>1、服务商数据同步来源于享扫超管数据配置，该数据同步类型为不可编辑，不支持修改；如果需要修改，请到享扫。</p>
      <p>2、资料修改仅支持服务商权限组、服务商标签选择，默认服务商权限组为“基础权限组服务商”，其他的服务商名称、服务商账号、负责人、手机号、支付商户编号、邮箱、地址均不可修改。</p>
    </div>

    <el-form ref="form" :rules="rules" label-position="right" :model="form" size="small " label-width="150px">
      <!--服务商名称-->
      <el-form-item label="服务商名称：" prop="name"><el-input v-model="form.name" maxlength="50" show-word-limit placeholder="请输入" :disabled="form_disabled" /></el-form-item>
      <el-form-item label="服务商权限组：" prop="spPackageId">
        <el-select v-model="form.spPackageId" filterable placeholder="请选择">
          <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务商账号：" prop="username">
        <el-input v-if="mode === 'add'" v-model="form.username" maxlength="12" show-word-limit placeholder="请输入" />
        <span v-else>{{ form.username }}</span>
      </el-form-item>
      <el-collapse-transition>
        <div v-show="isShowMoreConfig">
          <el-form-item v-if="mode === 'add'" label="密码：" prop="initPassword">
            <el-input v-model="form.initPassword" maxlength="12" show-word-limit placeholder="请输入" />
          </el-form-item>
          <el-form-item label="负责人：" prop="principal"><el-input v-model="form.principal" maxlength="18" show-word-limit placeholder="请输入" :disabled="form_disabled" /></el-form-item>
          <el-form-item label="手机号：" prop="mobilePhone"><el-input v-model="form.mobilePhone" maxlength="11" show-word-limit placeholder="请输入" :disabled="form_disabled" /></el-form-item>
          <el-form-item v-if="spInfo.type == 'SUPER'" label="支付商户编号：" prop="payMerchantNo">
            <el-input v-model="form.payMerchantNo" maxlength="30" show-word-limit placeholder="请输入" :disabled="form_disabled" />
            <span>*用于机构收取代理、商户充值流量余额的资金</span>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email"><el-input v-model="form.email" maxlength="60" show-word-limit placeholder="请输入" :disabled="form_disabled" /></el-form-item>
          <el-form-item label="地址：" prop="address">
            <el-input v-model.trim="form.address" :autosize="{ minRows: 2, maxRows: 5 }" maxlength="100" show-word-limit type="textarea" placeholder="请输入" :disabled="form_disabled" />
          </el-form-item>
          <el-form-item label="服务商标签：" prop="tags">
            <el-select v-model="form.tags" filterable multiple placeholder="请选择" clearable>
              <el-option v-for="v in tagOptions" :key="v" :label="v" :value="v" />
            </el-select>
          </el-form-item>
        </div>
      </el-collapse-transition>
      <el-form-item>
        <el-button type="primary" round @click="submitForm">提交{{ mode === 'add' ? '添加' : '更新' }}</el-button>
        <!--<el-button type="text" round @click="isShowMoreConfig=!isShowMoreConfig">{{-->
        <!--  isShowMoreConfig ? '隐藏' : '展开'-->
        <!--}}高级配置-->
        <!--</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import validateSpForm from './mixin/validateSpForm'
import { addSp, updateSp, spDetail } from '@/api/sp/index'
import { spPackagePage } from '@/api/sp/package'
import { tagList } from '@/api/sp/tag'
import { mapGetters } from 'vuex'

export default {
  mixins: [validateSpForm],
  data() {
    return {
      // 配置
      // 状态
      loading: false,
      isShowMoreConfig: true,
      // 数据
      mode: 'add',
      servicerId: null,
      packageList: [],
      tagOptions: [],
      form: {
        address: null,
        description: null,
        email: null,
        initPassword: null,
        mobilePhone: null,
        payMerchantNo: null,
        name: null,
        principal: null,
        serial: null,
        spPackageId: null,
        status: null,
        username: null,
        tags: []
      },
	    form_disabled: false
    }
  },
  computed: {
    ...mapGetters(['spInfo','userInfo'])
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.fetchPackageList()
    this.fetchTagOptions()
    this.fetchData()
  },
  beforeUpdate() {},
  update() {},
  activated() {
    this.fetchPackageList()
    this.fetchTagOptions()
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    /**
		 * 数据组
		 */
    // 初始化
    fetchData() {
	  // 设置修改权限
	  const source = this.userInfo.source
	  if (source == '0') {
		this.form_disabled = false
	  } else if (source == '1') {
		this.form_disabled = true
	  }
		
      if (this.$route.query.spId) {
        this.servicerId = this.$route.query.spId
        this.mode = 'edit'
        this.getDetail()
      }
    },

    // 获取详情
    getDetail() {
      this.loading = true
      spDetail({ params: { servicerId: this.servicerId } })
        .then(res => {
          this.form = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 获取权限组
    fetchPackageList() {
      new Promise((resolve, reject) => {
        const params = { pageNum: 1, pageSize: 100 }
        spPackagePage({ data: params })
          .then(res => {
            this.packageList = res.data.list || []
            resolve()
          })
          .finally(() => {
            resolve()
          })
      })
    },

    /**
		 * 按钮组
		 */
    // 保存
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const apiFun = this.mode === 'add' ? addSp : updateSp
          this.loading = true
          apiFun({ data: this.form })
            .then(res => {
              if (this.mode === 'add') {
                // this.$emit('update:tabName', 'spPage')  因没有跳转，改写成下面。
                this.$emit('updateTabName', 'searchSpPage')
              } else {
                this.$store.state.menus.activeSidebarSpInfo = Object.assign({}, this.form)
              }
              this.$notify({
                title: '成功',
                message: this.mode === 'add' ? '新增成功' : '更新成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },

    // 获取标签
    fetchTagOptions() {
      tagList()
        .then(res => {
          this.tagOptions = res.data || []
        })
        .finally(() => {})
    }

    /**
		 * 状态组
		 */
    /**
		 * 方法组
		 */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.sp-form-main {
	.el-input,
	.el-select,
	.el-textarea {
		width: 500px;
	}

	.instructions {
		border: 1px solid #dcdfe6;
		padding: 16px;
		box-sizing: border-box;
		margin: 15px 0 50px;
		h3{
			margin: 0;
		}
	}
}
</style>
